<example name="Select with a filter and tags">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import hubConfig from 'ring-ui-docs/components/hub-config';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';
    import warningIcon from '@jetbrains/icons/warning.svg'

    var props = {
      multiple: true,
      filter: {
        placeholder: 'Search'
      },
      tags: {
        reset: {
          separator: true,
          label: 'Reset the list',
          glyph: warningIcon
        }
      }
    };
    const avatarUrl = `${hubConfig.serverUri}/api/rest/avatar/default?username=blue`;


    const tags = [
      {'label': 'One', 'key': '1', 'type': 'user', readOnly: true},
      {'label': 'Two', 'key': '2', 'type': 'user', readOnly: true},
      {'label': 'Three', 'key': '3', 'type': 'user'},
      {
        'label': 'With icon',
        key: 4,
        icon: 'http://flagpedia.net/data/flags/mini/de.png'
      },
      {
        'label': 'With avatar',
        key: 5,
        icon: avatarUrl,
        avatar: avatarUrl
      }
    ];
    var data = {
      data: tags,
      selected: [tags[0]]
    };

    var select = render(Select.factory(props), document.getElementById('demo'))
    select.rerender(data);
  </file>
</example>

<example name="Select with a filter">
  <file type="html" disable-auto-size>
    <p>test</p>
    <div id="demo"></div>
    <button id="clear">Clear selected</button>
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var props = {
      filter: true
    };

    var data = {
      data: [
        {'label': 'One', 'key': '1', 'type': 'user'},
        {'label': 'Group', 'key': '2', 'type': 'user'},
        {'label': 'Three', 'key': '3', 'type': 'user'},
        {
          'label': 'With icon',
          key: 4,
          icon: 'http://flagpedia.net/data/flags/mini/de.png'
        }
      ],
      clear: true,
      selected: {'label': 'Group', 'key': '2', 'type': 'user'}
    };

    var select = render(Select.factory(props), document.getElementById('demo'))
    select.rerender(data);

    document.getElementById('clear').addEventListener('click', function () {
      select.rerender({selected: null});
    });
  </file>
</example>

<example name="Select with a large dataset">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var elementsNum = 100000;
    var selectedIndex = parseInt(elementsNum / 2);
    var dataset = [];
    for (var i = 0; i < elementsNum; i++) {
      dataset.push({'label': 'element ' + i, 'key': i, 'type': 'user'});
    }

    var props = {
      data: dataset
    };

    var select = render(Select.factory({
      filter: true,
      selected: dataset[selectedIndex]
    }), document.getElementById('demo'))
    select.rerender(props);
  </file>
</example>

<example name="Multiple select with a description">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var deFlag = '';
    var ruFlag = '';
    var icons = [deFlag, ruFlag, undefined];

    var elementsNum = 5;
    var dataset = [];
    for (var i = 0; i < elementsNum; i++) {
      dataset.push({
        'label': 'element ' + i,
        'key': i,
        description: 'description ' + i,
        icon: icons[i % 3]
      });
    }

    var props = {
      data: dataset
    };

    var select = render(
      Select.factory(
        {filter: true, selected: [dataset[0], dataset[3]], multiple: true}),
      document.getElementById('demo')
    );
    select.rerender(props);
  </file>
</example>

<example name="Disabled select">
  <file type="html" disable-auto-size>
    <div id="demo1"></div>
    <div id="demo2"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    render(
      Select.factory({disabled: true, loading: true}),
      document.getElementById('demo1')
    );

    render(
      Select.factory({disabled: true, loading: true, type: Select.Type.INPUT}),
      document.getElementById('demo2')
    );
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Simple input-based select">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    var data = [];
    for (let i = 0; i < 20; i++) {
      data.push({'label': 'Item ' + i, 'key': i});
    }

    render(
      Select.factory({type: Select.Type.INPUT, data: data}),
      document.getElementById('demo')
    );
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Simple input-based select in suggest-only mode">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    var data = [];
    for (let i = 0; i < 20; i++) {
      data.push({'label': 'Item ' + i, 'key': i});
    }

    render(Select.factory({
      type: Select.Type.INPUT,
      allowAny: true,
      hideArrow: true,
      label: 'Placeholder without arrow',
      data: data, selected: data[1]
    }), document.getElementById('demo'));
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Simple select with default filter mode enabled">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    render(Select.factory({
      filter: true,
      data: [
        {'label': 'One', 'key': '1'},
        {'label': 'Two', 'key': '2', disabled: true},
        {'label': 'Two One', 'key': '2.1', level: 1},
        {'label': 'Two Two', 'key': '2.2', level: 1},
        {'label': 'Three', 'key': '3'}
      ]
    }), document.getElementById('demo'));
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example
  name="Simple select with default filter mode enabled and a loading indicator">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    render(Select.factory({
      filter: true,
      loading: true,
      data: [
        {'label': 'One', 'key': '1'},
        {'label': 'Group', 'key': '2'},
        {'label': 'Three', 'key': '3'}
      ],
      selected: {'label': 'Group', 'key': '2'}
    }), document.getElementById('demo'));
  </file>
</example>

<example name="Select with a customized filter and an 'Add item' button">
  <file type="html" disable-auto-size>
    <div id="demo" class="ring-input-size_md"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var data = [];
    for (let i = 0; i < 100; i++) {
      data.push({
        'label': 'Item long long long long long  long long long label ' + i,
        'key': i
      });
    }

    render(Select.factory({
      filter: {
        placeholder: 'Select me',
        value: 'One'
      },
      hint: 'Press down to do something',
      add: {
        prefix: 'Add name'
      },
      onAdd: function (value) {
        console.log('Add', value);
      },
      data: data,
      selected: data[49],
      'onSelect': function (selected) {
        console.log('onSelect, selected item:', selected);
      }
    }), document.getElementById('demo'));
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Select with custom items and an 'Add item' button">
  <file type="html" disable-auto-size>
    <div id="demo" class="ring-input-size_md"></div>
  </file>
  <file type="css">
    :global(.label) {
      border-radius: 3px;
      color: #669ECC;
      background-color: #E5F4FF;
      padding-left: 8px;
      margin: 2px 0;
    }

    body {
      padding: 8px;
      width: 50%;
    }
  </file>
  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import List from '@jetbrains/ring-ui/components/list/list';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var data = [];
    for (let i = 0; i < 100; i++) {
      const label = `Label ${i}`;
      data.push({
        key: label,
        label,
        template: <span className="label">{label}</span>,
        rgItemType: List.ListProps.Type.CUSTOM
      });
    }

    render(Select.factory({

      filter: true,
      hint: 'Press down to do something',
      add: {
        prefix: 'Add label'
      },
      onAdd: function (value) {
        console.log('Add', value);
      },
      data: data,
      'onSelect': function (selected) {
        console.log('onSelect, selected label:', selected.text);
      }
    }), document.getElementById('demo'));
  </file>
</example>

<example name="Select with an always visible 'Add item' button">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    var data = [];
    for (let i = 0; i < 10; i++) {
      data.push({'label': 'Item ' + i, 'key': i});
    }

    render(Select.factory({
      filter: {
        placeholder: 'Select me',
        value: 'One'
      },
      add: {
        alwaysVisible: true,
        label: 'Create New Blah Blah'
      },
      onAdd: function (value) {
        console.log('Add', value);
      },
      data: data,
      'onSelect': function (selected) {
        console.log('onSelect, selected item:', selected);
      }
    }), document.getElementById('demo'));
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Multiple-choice select with custom view">
  <file type="html" disable-auto-size>
    <div id="multipleCustomView"></div>
    <div id="demo"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    render(Select.factory({
      filter: true,
      add: {
        prefix: 'Add some item'
      },
      multiple: {
        label: 'Change selected items', // override button label if something selected
        removeSelectedItems: false      // remove selected items from the list, useful with "disableLabelSelection" and custom display
      },
      selected: [{'label': 'Two long label', 'key': '2'}],
      data: [
        {'label': 'One long label', 'key': '1'},
        {'label': 'Two long label', 'key': '2'},
        {'label': 'Three long label', 'key': '3'}
      ],
      onSelect: function (selected) {
        console.log('onSelect, selected item:', selected);
      },
      onDeselect: function (deselected) {
        console.log('onDeselect, deselected item:', deselected);
      },
      onChange: function (selection) {
        console.log('onChange, selection:', selection);
        var items = [];
        selection.forEach(function (item) {
          items.push(item.label);
        });
        document.getElementById('multipleCustomView').innerHTML = items.join(', ');
      }
    }), document.getElementById('demo'));
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Select as a dropdown without filter">
  <file type="html" disable-auto-size>
    <button id="demoButton">Click me</button>
    <div id="demo"></div>
    <div id="changeResult"></div>
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';

    var data = [];
    for (let i = 0; i < 20; i++) {
      data.push({
        'label': 'Item ' + i,
        'description': 'Description for the item lalalalala ' + i,
        'key': i
      });
    }
    var select = render(
      Select.factory({
        type: Select.Type.CUSTOM,
        data: data,
        onChange: function (selected) {
          document.getElementById('changeResult').innerHTML = selected.label;
        }
      }),
      document.getElementById('demo')
    );

    document.getElementById('demoButton').onclick = function () {
      select._clickHandler();
    }
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
</example>

<example name="Select with render optimization">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="css">
    body {
    padding: 8px;
    width: 50%;
    }
  </file>
  <file type="js">
    import {render} from 'react-dom';
    import Select from '@jetbrains/ring-ui/components/select/select';
    import List from '@jetbrains/ring-ui/components/list/list';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    var props = {
      filter: true
    };

    var data = {
      data: (new Array(1000)).join(',').split(',').map(function (_, index) {
        return {
          label: 'Label ' + index,
          key: index,
          rgItemType: index % 10 ? List.ListProps.Type.ITEM : List.ListProps.Type.TITLE
        }
      })
    };

    var select = render(Select.factory(props), document.getElementById('demo'))
    select.rerender(data);
  </file>
</example>
